<template>
  <div class="app-container">

    <div class="tabInfo">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入表达式名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleQuery">
          <el-icon><Search /></el-icon>搜索
        </el-button>
        <el-button size="mini" @click="resetQuery">
          <el-icon><Refresh /></el-icon>重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="expressionList"
      @current-change="handleSingleExpSelect"
    >
      <el-table-column width="55" align="center">
        <template #default="scope">
          <el-radio v-model="radioSelected" :label="scope.row.id">
            {{ "" }}
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="表达式内容" align="center" prop="expression" />
      <el-table-column label="表达式类型" align="center" prop="dataType">
        <template #default="scope">
          <dict-tag :options="exp_data_type" :value="scope.row.dataType" />
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page-sizes="[5, 10]"
      layout="prev, pager, next"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { listExpression } from "@/api/flowable/expression";
import { StrUtil } from "@/utils/StrUtil";

// exp_data_type

const emit = defineEmits(["handleSingleExpSelect"]);
const { proxy } = getCurrentInstance();
const { sys_common_status } = proxy.useDict("sys_common_status");
const { exp_data_type } = proxy.useDict("exp_data_type");
const props = defineProps({
  selectValues: {
    type: [Number, String],
    default: null,
    required: false,
  },
});
const queryForm = ref(null);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  name: null,
  expression: null,
  status: null,
});
const expressionList = ref([]);
const loading = ref(true);
const total = ref(0);
const showSearch = ref(true);
const radioSelected = ref(null);

const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

const resetQuery = () => {
  queryForm.value.resetFields();
  handleQuery();
};

const handleSingleExpSelect = (selection) => {
  radioSelected.value = selection.id;
  emit("handleSingleExpSelect", selection);
};

const getList = () => {
  loading.value = true;
  listExpression(queryParams.value).then((response) => {
    expressionList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};

onMounted(() => {
  getList();
});

watch(
  () => props.selectValues,
  (newVal) => {
    if (StrUtil.isNotBlank(newVal)) {
      radioSelected.value = newVal;
    }
  },
  { immediate: true }
);
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>